import {
  Button,
  DatePicker,
  Checkbox,
  Form,
  Input,
  Select,
  Radio,
  message,
  Upload,
} from "antd";
import { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { addProperty } from "../../../../../../store/reducer/propertylist";
import { useNavigate, useLocation } from "react-router-dom";
// 数据
const provinceData = ["浙江", "江苏"];
const cityData = {
  浙江: ["杭州", "宁波"],
  江苏: ["南宁", "苏州", "镇江"],
};
const unitData = ["元/㎡", "万/套"];

// 函数式组件
const PropertyInfo2 = () => {
  // 跳转路由
  const navigate = useNavigate();
  // 接收传递的对象值
  const location = useLocation();
  const stateValues = location.state;
  // 仓库
  const dispatch = useDispatch();
  useEffect(() => {
    // 从地图页跳转回来，回显标注的位置
    if (stateValues) {
      let latlngObj = stateValues.latlng;
      let latlngStr = "";
      for (let key in latlngObj) {
        latlngStr += `${latlngObj[key].toFixed(2)} `;
      }
      setmapLatlng(latlngStr);
    }
  }, []);
  // 状态
  const [cities, setCities] = useState(cityData[provinceData[0]]);
  const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0]);
  const [unit, setUnit] = useState(unitData[0]);
  const [mapLatlng, setmapLatlng] = useState(null);
  const handleProvinceChange = (value) => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
  };
  const props = {
    name: "file",
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
    headers: {
      authorization: "authorization-text",
    },
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };
  // 方法
  const onFinish = (values) => {
    values.mapLatlng = mapLatlng;
    console.log("提交成功:", values);
    let data = {
      action: Math.random(),
      id: Math.random(),
      key: Math.random(),
      name: values.propertyName,
      price: values.averagePrice,
      region: values.propertyAddress,
      sort1: 2011,
      state: false,
      time: "08:00:00",
    };
    // 派发添加数据方法
    dispatch(addProperty(data));
    // 跳转到列表页面
    navigate("/home/propertiesforsale/propertymanagement/propertylist");
  };

  const onSecondCityChange = (value) => {
    setSecondCity(value);
  };
  const onPriceChange = (value) => {
    setUnit(value);
  };
  const changeDate = (date, dateString) => {
    console.log(date, dateString);
  };
  const changeDate2 = (date, dateString) => {
    console.log(date, dateString);
  };
  const clickYhlp = (date, dateString) => {
    console.log(date, dateString);
  };

  return (
    <div>
      <Form onFinish={onFinish}>
        <Form.Item required label="所属区域">
          <Select
            defaultValue={provinceData[0]}
            style={{
              width: 120,
            }}
            onChange={handleProvinceChange}
            options={provinceData.map((province) => ({
              label: province,
              value: province,
            }))}
          />
          <Select
            style={{
              width: 120,
            }}
            value={secondCity}
            onChange={onSecondCityChange}
            options={cities.map((city) => ({
              label: city,
              value: city,
            }))}
          />
        </Form.Item>
        <div style={{ display: "flex" }}>
          <Form.Item required label="楼盘名称" name="propertyName">
            <div style={{ width: "100%" }}>
              <Input placeholder="楼盘名称" />
            </div>
          </Form.Item>
          <div style={{ display: "flex" }}>
            <Form.Item required label="均价" name="averagePrice">
              <div style={{ width: "100px" }}>
                <Input placeholder="30000" />
              </div>
            </Form.Item>
            <div>
              <Select
                style={{
                  width: 120,
                }}
                value={unit}
                onChange={onPriceChange}
                options={unitData.map((unit) => ({
                  label: unit,
                  value: unit,
                }))}
              />
            </div>
          </div>
        </div>
        <div style={{ display: "flex" }}>
          <Form.Item required label="楼盘地址" name="propertyAddress">
            <Input placeholder="例: 海秀路101号" />
          </Form.Item>
          <Form.Item label="售楼处地址" name="salesAddress">
            <Input placeholder="例: 海秀路101号" />
          </Form.Item>
        </div>
        <div style={{ display: "flex" }}>
          <Form.Item label="开盘时间" name="openDate">
            <div style={{ display: "flex" }}>
              <div style={{ width: "150px" }}>
                <DatePicker onChange={changeDate} />
              </div>
              <div style={{ width: "200px" }}>
                <Input placeholder="1#2# 已开盘" />
              </div>
            </div>
          </Form.Item>
          <Form.Item label="交房时间" name="handHouseDate">
            <div style={{ display: "flex" }}>
              <div style={{ width: "150px" }}>
                <DatePicker onChange={changeDate2} />
              </div>
              <div style={{ width: "200px" }}>
                <Input placeholder="1#2# 已交房" />
              </div>
            </div>
          </Form.Item>
        </div>
        <div style={{ display: "flex" }}>
          <Form.Item label="售楼电话" name="salesTelephone">
            <div>
              <Input placeholder="0896-52115364" />
            </div>
          </Form.Item>
          <span>转</span>
          <Form.Item name="transferTelephone">
            <div>
              <Input placeholder="0896" />
            </div>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="预售证号" name="PreSaleNumber">
            <div style={{ display: "flex" }}>
              <div>
                <Input placeholder="[2014]海景房预字(0076号)" />
              </div>
            </div>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="开发商" name="developers">
            <Input placeholder="茶壶地产" />
          </Form.Item>
        </div>
        <div>
          <Form.Item label="地图坐标" name="mapLatlng">
            <div style={{ display: "flex" }}>
              <div>
                <Input placeholder="163.15,35.52" value={mapLatlng} />
              </div>
              <Button
                type="primary"
                onClick={() => {
                  navigate("/map");
                }}
              >
                标注位置
              </Button>
            </div>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="购房红包" name="redPacket">
            <div style={{ width: "200px", display: "flex" }}>
              <Input placeholder="1000" />
              <span>元</span>
            </div>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="优惠楼盘" name="discountProperty">
            <Checkbox.Group>
              <Checkbox onChange={clickYhlp} />
            </Checkbox.Group>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="装修情况" name="fitment">
            <Radio.Group>
              <Radio value="简装">简装</Radio>
              <Radio value="精装">精装</Radio>
              <Radio value="豪装">豪装</Radio>
            </Radio.Group>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="销售状态" name="salesStatus">
            <Radio.Group>
              <Radio value="在售">在售</Radio>
              <Radio value="新盘">新盘</Radio>
              <Radio value="尾盘">尾盘</Radio>
              <Radio value="售罄">售罄</Radio>
              <Radio value="未开盘">未开盘</Radio>
            </Radio.Group>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="楼盘类型" name="propertyType">
            <Checkbox.Group>
              <Checkbox value="住宅">住宅</Checkbox>
              <Checkbox value="别墅">别墅</Checkbox>
              <Checkbox value="商铺">商铺</Checkbox>
              <Checkbox value="写字楼">写字楼</Checkbox>
              <Checkbox value="公寓">公寓</Checkbox>
              <Checkbox value="底商">底商</Checkbox>
            </Checkbox.Group>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="特色标签" name="feature">
            <Checkbox.Group>
              <Checkbox value="小户型">小户型</Checkbox>
              <Checkbox value="旅游地产">旅游地产</Checkbox>
              <Checkbox value="教育地产">教育地产</Checkbox>
              <Checkbox value="宜居生态">宜居生态</Checkbox>
              <Checkbox value="公园地产">公园地产</Checkbox>
              <Checkbox value="海景楼盘">海景楼盘</Checkbox>
              <Checkbox value="养生社区">养生社区</Checkbox>
              <Checkbox value="精装楼盘">精装楼盘</Checkbox>
              <Checkbox value="品牌楼盘">品牌楼盘</Checkbox>
            </Checkbox.Group>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="推荐位" name="featuredSlot">
            <Checkbox.Group>
              <Checkbox value="首页热销楼盘">首页热销楼盘</Checkbox>
              <Checkbox value="首页热盘推荐">首页热盘推荐</Checkbox>
              <Checkbox value="首页刚需推荐">首页刚需推荐</Checkbox>
              <Checkbox value="新房列表推荐">新房列表推荐</Checkbox>
            </Checkbox.Group>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="缩略图">
            <Upload {...props}>
              <Button>上传图片</Button>
            </Upload>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="视频看房">
            <div style={{ display: "flex" }}>
              <Button>选择视频</Button>
              <Button>开始上传</Button>
              <span>
                视频上传到云存储，请先配置相关账号。支持视频格式：mp4,flv,m3u8
                最大可上传500M
              </span>
            </div>
          </Form.Item>
        </div>
        <div>
          <Form.Item label="全景看房">
            <Input />
          </Form.Item>
        </div>
        <div>
          <Form.Item label="楼盘介绍">
            <Input />
          </Form.Item>
        </div>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default PropertyInfo2;
